<template>
  <van-overlay :show="show" @click.stop="close">
    <div class="video-box" v-if="show">
      <video :src="src" autoplay="false" controls="controls" v-if="show"></video>
      <van-icon class="close-btn" name="clear" @click.stop="close" color="#fff" />
    </div>
  </van-overlay>
</template>

<script>
export default {
  name: 'VideoPlay',
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    src: {
      type: String,
      default: 'https://koalareading-online.oss-cn-beijing.aliyuncs.com/student/static/video/enjoyChineseProduce.mp4',
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    close() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.video-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 16px;
    display: inline-block;
    // width: 2.400px;
    // height: 2.400px;
    // background: url('../../assets/images/close_icon.png') center center no-repeat;
    background-size: contain;
    z-index: 30;
    font-size: 20px;
  }
  video {
    // max-width: 80%;
    max-height: 80%;
  }
}
</style>
